<!--  -->
<template>
  <div class="">
    <MyHeader></MyHeader>
    <div class="wrapper" ref="wrapper">
      <div class="shop-list">
        <van-swipe my-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <div class="shop-conent">
              <img v-lazy="image" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="shop-content">
        <div class="shop-content-item">
          <van-grid :border="true" :column-num="5">
            <van-grid-item
              v-for="(item, key) in shopList"
              :key="key"
              @click="handleClick(item.title)"
            >
              <van-image :src="item.image" />
              <div class="shop-content-text">{{ item.title }}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <MyShopbody></MyShopbody>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue"
import { Swipe, SwipeItem, Lazyload } from "vant"
Vue.use(Swipe).use(SwipeItem).use(Lazyload)
import MyHeader from "@/components/MyHeader.vue"
import MyShopbody from "@/components/MyShopbody.vue"
import BScroll from "better-scroll"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyHeader,
    MyShopbody,
  },
  data () {
    //这里存放数据
    return {
      images: [
        "https://oss.suning.com/adpp/creative_kit/material/picture/20210420-33d64d647fcd4ecaac5ced9ca27581df1c2231a54c054b86.jpg",
        "https://oss.suning.com/adpp/creative_kit/material/picture/20220215-74189abfc7f44fa1943cc1e7fa7b41229cf40ee0af064e09.jpg?format=_is_1242w_610h",
      ],
      shopList: {},
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    navList () {
      this.$axios.get('homeNav.json').then(res => {
        this.shopList = res
        this.shopList = this.shopList.slice(0, 10)
      })
    },
    handleClick (val) {
      // console.log(val);
      this.$router.push({ name: "SearchResult", params: { val: val } })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.navList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll
      console.log(bscrollDom)
      // this.aBScroll = new BScroll(bscrollDom, {})
    })
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.wrapper {
  overflow-y: scroll;
  height: 100vh;

  .shop-list {
    margin: 0 auto;
    margin-top: 0.3rem;
    height: 3.3rem;
    overflow: hidden;
    width: 95%;
    border-radius: 0.5rem;
    position: relative;

    .shop-conent {
      img {
        width: 100%;
        margin-top: -1.3rem;
      }
    }
  }

  shop-content.shop-content {
    border: 1px solid #000;

    .shop-content-item {
      border: 1px solid #000;
    }

    .shop-content-text {
      margin-top: 0.2rem;
    }
  }
}
</style>
<style>
.van-grid-item {
  /* height: 2.6rem; */
}

.van-image {
  width: 55px;
  height: 55px;
  /* overflow: hidden; */
  border-radius: 50%;
}
.vue-waterfall {
  overflow-y: revert;
}
</style>